<template>
	<view class="">
		<block v-for="(i,index) in list" :key="index">
			<view class="page">
				<view class="tuijian"></view>
				<view class="header">
					<text class="header_text wenben2">交通通哈根达斯50交通哈通哈根达斯50通哈根达斯550交通哈通哈根达斯50通哈根达斯550交通哈通哈根达斯50通哈根达斯550交通哈通哈根达斯50通哈根达斯50</text>
					<view class="button">
						<u-button class="custom-style" text="去兑换" shape="circle" @click="goduihuan(i,index)"></u-button>
					</view>
				</view>
				<view class="youshi">
					<view class="biaoti">
						<text>优势</text><text>起兑单位</text><text>起兑次数</text><text>起兑次数</text>
					</view>
					<view class="biaoti_title">
						<text>价格高</text><text>50000</text><text>11次/月</text><text>12.40元/万</text>
					</view>
				</view>
			</view>
		</block>
	</view>
</template>
<script>
	export default {
		props: {
			list: {
				type: Array,
				default: []
			}
		},
		methods:{
			goduihuan(){
				uni.navigateTo({
					url:'/pages/jifen-xiangqing/jifen-xiangqing'
				})
			}
		}
	}
</script>
<style lang="scss" scoped>
	.custom-style {
		display: flex;
		justify-content: flex-end;
		color: #ff0000;
		width: 137rpx;
		height: 65rpx;
		background: #FFFFFF;

	}

	.button {
		margin-right: 21rpx;
	}

	.page {
		width: 669rpx;
		height: 278rpx;
		background-image: url(/static/xiangqing/dh.png);
		background-size: 100% 100%;
		margin-bottom: 29rpx;
		position: relative;
		overflow: hidden;

		.tuijian {
			width: 82rpx;
			height: 36rpx;
			position: absolute;
			top: 0;
			left: 0;
			background-image: url(/static/xiangqing/tuijian.png);
			background-repeat: no-repeat;
			background-size: 100%;
		}

		.header {
			width: 100%;
			display: flex;
			margin-top: 51rpx;
			align-items: center;
			justify-content: space-between;

			.header_text {
				padding-left: 18rpx;
				font-family: Heiti SC;
				font-weight: 300;
				font-size: 30rpx;
				color: #FFFFFF;
				height: 80rpx;
			}
		}
	}

	.youshi {
		width: 90%;
		margin: 17rpx 0rpx 0 26rpx;
		.biaoti {
			font-family: Heiti SC;
			font-weight: 300;
			font-size: 26rpx;
			color: #FFFFFF;
			display: flex;
			justify-content: space-between;

			text {
				width: 20%;
				display: flex;
				justify-content: center;
			}
		}

		.biaoti_title {
			margin-top: 20rpx;
			font-family: Heiti SC;
			font-weight: 300;
			font-size: 26rpx;
			color: #FFFFFF;
			display: flex;
			justify-content: space-between;
			align-items: center;

			text {
				width: 25%;
				display: flex;
				justify-content: center;
				font-family: Heiti SC;
				font-weight: 500;
				font-size: 26rpx;
				color: #333333;
			}
		}
	}

	.biaoti_title {
		text:first-child {
			font-family: Heiti SC;
			font-weight: 500;
			font-size: 26rpx;
			color: #EE1A58 !important;
		}

	}
</style>